<!--
 * @Descripttion: 
 * @version: 
 * @Author: cyj
 * @Date: 2022-12-27 13:14:25
-->
<template>
    <div class="subscribers">
        <div class="list" v-if="subscribers.length !== 0">
            <div class="item" v-for="(item, index) in subscribers" :key="index" @click="click(item)">
                <!-- 收藏人头像 -->
                <div class="item-img">
                    <img :src="item.avatarUrl" alt="">
                </div>
                <!-- 收藏人介绍 -->
                <div class="item-name">
                    <span>{{ item.nickname }}</span>
                    <span v-if="item.gender !== 0" class="gender"
                        :class="item.gender === 1 ? 'iconfont icon-nan' : 'iconfont icon-nv'"></span>
                    <div class="signature">{{ item.signature }}</div>
                </div>
            </div>
        </div>
        <!-- 分页器 -->
        <div class="pagination">
            <el-pagination small :total="total" :current-page="currentPage" :page-size="pageSize"
                @current-change="handleCurrentChange" background layout="prev, pager, next"></el-pagination>
        </div>

        <div class="no" v-if="subscribers.length === 0">
            <el-empty description="暂无收藏者" :image-size="200"></el-empty>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue'
defineProps({
    subscribers: {
        type: Array,
        default: []
    },
    total: {
        type: Number,
        default: 0
    }
})
const emit = defineEmits(['handlePage'])
let currentPage = ref(1)
let pageSize = ref(48)

// 点击收藏人
function click(item) {
    console.log(item);
}

//触发自定义事件
function handleCurrentChange(page) {
    currentPage.value = page
    emit('handlePage',page)
    window.scroll(0,0)
}

</script>

<style lang="scss" scoped>
.subscribers {
    .list {
        display: flex;
        flex-wrap: wrap;

        .item {
            height: 110px;
            width: 360px;
            margin-right: 20px;
            margin-bottom: 30px;
            display: flex;
            align-items: center;

            &-img {
                height: 100px;
                width: 100px;

                img {
                    height: 100%;
                    width: 100%;
                    border-radius: 50%;

                }
            }

            &-name {
                margin-left: 20px;
                width: 220px;
                .signature {
                    margin-top: 5px;
                    font-size: 10px;
                    color: #666;
                }
            }
        }
    }
}

.icon-nan {
    color: #1296db;
}

.icon-nv {
    color: #d81e06;
}

.gender {
    margin-left: 10px;
}

.pagination {
    display: flex;
    justify-content: center;
}
</style>